<template>
    <!-- 头部 -->
    <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="onClickLeft" />

    <van-tabs v-model:active="active" type="line" :swipeable="true" :border="true" line-width="100px">
        <!-- Tab标签(左) -->
        <van-tab title="账号密码登录">
            <br><br><br>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="usephone" name="账号" label="账号" placeholder="用户名或手机号"
                        :rules="[{ required: true, message: '请填写账号' }]" />
                    <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <br>
                    <van-button round block type="primary" native-type="submit" color="red">
                        登录
                    </van-button>
                    <br>
                    <br>
                    <van-button round block type="primary" color="red" @click="toreg">
                        没有账号去注册
                    </van-button>
                </div>
            </van-form>
        </van-tab>

        <!-- Tab标签(右) -->
        <van-tab title="手机验证码登录">
            <van-form @submit="onSubmit">
                <br><br><br>
                <van-cell-group inset>
                    <van-field v-model="usephone" name="手机号" label="手机号" placeholder="手机号"
                        :rules="[{ required: true, message: '请填写手机号' }]" />
                    <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码"
                        :rules="[{ required: true, message: '请填写验证码' }]">
                        <template #button>
                            <van-button size="small" type="primary" @click="sentsms">发送验证码</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <br>
                    <van-button round block type="primary" native-type="submit" color="red">
                        登录
                    </van-button>
                </div>
            </van-form>
        </van-tab>
    </van-tabs>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref, type Ref } from 'vue';
import { SendSms, AdminLogin } from '@/api/api'
import { useUserInfoStore } from '@/stores/useInfo';
import { showToast } from 'vant';

const store = useUserInfoStore()
const router = useRouter()
const active = ref('')
const password = ref('')//密码
const usephone: Ref<any> = ref(router.currentRoute.value.query.id || '')//手机号
const sms = ref()//验证码

const onClickLeft = () => {
    router.back()
}

const toreg = () => {
    router.push('/reg')
}

const sentsms = async () => {//发送验证码
    const params = usephone.value
    const res = await SendSms(params)
    if (res.data.code = '200') {
        showToast({
            message: res.data.message,
            position: 'bottom'
        })
    }
}


const onSubmit = async () => { //提交(登录)
    const res2 = await AdminLogin({ loginname: usephone.value, password: password.value })
    if (res2.data.code === '200') {
        const token = res2.data.data.token
        const useid = res2.data.data.userid
        localStorage.setItem('userToken', token)
        localStorage.setItem('userId', useid)
        store.setUserId(useid)
        store.setUserToken(token)
        showToast({
            message: res2.data.message,
            position: 'bottom'
        })
        router.push('/home')
    } else {
        showToast({
            message: res2.data.message,
            position: 'bottom'
        })
    }
}
</script>

<style lang="scss" scoped>

</style>